<template>
	<view class="content">
		<!-- 导航栏 -->
		<navBar title='首页' :isSlot="true" :isNav="true"></navBar>

		<!-- 搜索框 -->
		<u-search @search="search" placeholder="请输入搜索内容" margin="10px" shape="square" :showAction="false"
			v-model="keyword"></u-search>

		<!-- 选项卡 -->
		<u-tabs :current="current" :list="Classifylist" @change="tabCurrentChange" keyName="classifyName"></u-tabs>

		<!-- 分割线 -->
		<u-divider></u-divider>

		<!-- 轮播图 -->
		<swiper :current="current" @change="swiperCurrentChange" class="swiper"
			:style="'height:' + (height + 60) + 'px'">
			<swiper-item v-for="(item,index) in Classifylist" :key="index">
				<view class="swiper-item">
					<u-waterfall v-model="ClassifyBlogList[index]" ref="waterfall" class="waterfall">
						<template v-slot:left="{leftList}">
							<view class="blog-item" v-for="(item, index) in leftList" :key="index">
								<image @load="imageLoaded" :src="item.Blog.cover" mode="widthFix"
									@click="toContent(item.blogId)"></image>
								<view class="blog-title">{{item.Blog.title}}</view>
								<view class="blog-author">
									<image :src="item.Blog.userAvatar" mode=""></image>
									<text>{{item.Blog.userName}}</text>
									<view class="iconBox" @click="likeBlogs(item)">
										<u-icon name="heart-fill" color="#e06c75" size="20"></u-icon>
										<!-- <u-icon name="heart-fill" size="20" v-else></u-icon> -->
										<text>{{item.LikeBlog.count}}</text>
									</view>
								</view>
							</view>
						</template>
						<template v-slot:right="{rightList}">
							<view class="blog-item" v-for="(item, index) in rightList" :key="index">
								<image @load="imageLoaded" :src="item.Blog.cover" mode="widthFix"
									@click="toContent(item.blogId)"></image>
								<view class="blog-title">{{item.Blog.title}}</view>
								<view class="blog-author">
									<image :src="item.Blog.userAvatar" mode=""></image>
									<text>{{item.Blog.userName}}</text>
									<view class="iconBox" @click="likeBlogs(item)">
										<u-icon name="heart-fill" color="#e06c75" size="20"></u-icon>
										<!-- <u-icon name="heart-fill" size="20" v-else></u-icon> -->
										<text>{{item.LikeBlog.count}}</text>
									</view>
								</view>
							</view>
						</template>
					</u-waterfall>
				</view>
			</swiper-item>
		</swiper>
		<!-- <u-loadmore :status="status" /> -->
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex'

	import {
		getClassify,
		getClassifyBlogList,
		getLikeBlog,
		likeBlog
	} from "@/config/api.js"

	export default {
		data() {
			return {
				title: 'Hello',
				Classifylist: [],
				ClassifyBlogList: [],
				current: 0,
				height: 0,
				keyword: "",
				offset: 0,
				lock: true
			}
		},
		onLoad() {
			// 获取分类信息
			this.initgetClassify()
		},
		onShow() {
			// 显示TabBar
			uni.showTabBar()
		},
		onReachBottom() {
			this.getNewClassify()
		},
		onPullDownRefresh() {
			this.current = 0;
			this.$refs.waterfall.forEach((vc) => vc.clear());
			this.ClassifyBlogList = [];
			this.initgetClassify();

			// 停止下拉刷新
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 获取分类索引
			tabCurrentChange(e) {
				this.current = e.index
			},
			// 获取轮播图索引
			swiperCurrentChange(e) {
				this.lock = true
				this.current = e.detail.current
				this.imageLoaded()

				if (this.ClassifyBlogList[this.current]) return;
				this.initgetClassifyBlogList(this.Classifylist[this.current].id, 0)
			},
			// 请求获取分类信息
			async initgetClassify() {
				const res = await getClassify()
				this.Classifylist = res.data.data.rows
				// 请求获取分类下博客信息
				this.initgetClassifyBlogList(this.Classifylist[this.current].id)
			},
			async initgetClassifyBlogList(id) {
				const BlogList = await getClassifyBlogList(id)
				this.$set(this.ClassifyBlogList, this.current, BlogList.data.data.rows)
				uni.setStorageSync('ClassifyBlogList', this.ClassifyBlogList)
				this.ClassifyBlogList[this.current].forEach(ele => ele.isShow = false)

			},
			imageLoaded() {
				uni.createSelectorQuery().selectAll(".waterfall").boundingClientRect((res) => {
					this.height = res[this.current].height;
				}).exec();
			},
			async search() {
				if (!this.keyword)
					return uni.showToast({
						icon: "error",
						title: "搜索不能为空",
					});
				//	当搜索值不为空时，通过 navigateTo 将关键词携带到搜索页进行搜索
				uni.navigateTo({
					url: "/subpages/search/search?keyword=" + this.keyword,
					success: () => {
						//	跳转成功的话，就清空关键词
						this.keyword = null;
					},
				});
			},
			async getNewClassify() {

				if (this.ClassifyBlogList[this.current].length == 6) {
					this.offset = 0
				} else {
					this.offset = this.ClassifyBlogList[this.current].length - 6
				}
				this.offset += 6
				if (!this.lock) return
				const arr = await getClassifyBlogList(this.Classifylist[this.current].id, this.offset)
				this.ClassifyBlogList.splice(this.current, 1, this.ClassifyBlogList[this.current].concat(arr.data
					.data
					.rows))
				if (arr.data.data.rows.length == 0) {
					this.lock = false
				}
			},
			toContent(id) {
				uni.navigateTo({
					url: "/subpages/bolg/bolg?id=" + id
				})
			},
			async likeBlogs(data) {
				const res = await likeBlog({
					id: data.blogId,
					projectId: 162
				}, this.userInfo.token)
				const index = this.ClassifyBlogList[this.current].findIndex(ele => ele.blogId == data.blogId)
				if (res.data.msg == "取消点赞成功") {
					// this.ClassifyBlogList[this.current].forEach((ele,i)=>{
					// 	if(i == index){
					// 		console.log(ele.LikeBlog.count)
					// 		ele.LikeBlog.count--
					// 	}
					// })
					this.ClassifyBlogList.forEach((ele, i) => {
						if (i == this.current) {
							ele.forEach((item, li) => {
								// this.$set(this.ClassifyBlogList, this.current, BlogList.data.data.rows)
								if (li == index) {
									item.LikeBlog.count--
								}
							})
						}
					})
				} else {
					// this.ClassifyBlogList[this.current].forEach((ele,i)=>{
					// 	if(i == index){
					// 		console.log(ele.LikeBlog.count)
					// 		ele.LikeBlog.count++
					// 	}
					// })
					this.ClassifyBlogList.forEach((ele, i) => {
						if (i == this.current) {
							ele.forEach((item, li) => {
								// this.$set(this.ClassifyBlogList, this.current, BlogList.data.data.rows)
								if (li == index) {
									item.LikeBlog.count++
								}
							})
						}
					})
				}
				// 请求获取分类下博客信息
				this.initgetClassifyBlogList(this.Classifylist[this.current].id)
				console.log(this.ClassifyBlogList);
			}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss">
	.swiper {
		min-height: 70vh;

		.waterfall {
			padding: 0 10px;

			.blog-item {
				width: 95%;
				margin: 0 auto;
				margin-bottom: 12px;
				padding: 3px;
				border: 0.5px solid #c8c7cc;
				border-radius: 8px;
				box-sizing: border-box;
				box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
				background-color: #fff;

				image {
					width: 100%;
					border-radius: 8px;
				}

				.blog-author {
					display: flex;
					align-items: center;

					image {
						width: 8vw;
						height: 8vw;
						border-radius: 50%;
					}

					.iconBox {
						margin-left: 18vw;
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
</style>
